<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h1>{{msg}}</h1>
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <h2>age：{{myAge+1}}</h2>
        <button @click="updateAge">尝试修改收到的年龄</button>
    </div>
</template>

<script>
    //组件交互相关的代码(数据、方法等)
    export default{
            name:'School-test',
            data(){
            return {
                msg:'这是我的学校',
                myAge:this.age
            }
            },
            //简单接受
            //props:['address','schoolName','age']
             
            //接受的同时对数据进行类型限制
            // props:{
            //     schoolName:String,
            //     age:Number,
            //     address:String
            // }

            //接受的同时:对数据进行类型限制+默认值的指定+必要性的限制
            props:{
                schoolName:{
                    type:String,//name的类型
                    required:true //name是必须传的
                },
                age:{
                    type:Number,//age的类型
                    default:99 //默认值
                },
                address:{
                    type:String,//address的类型
                    required:true //address是必须传的
                },
            },
            methods:{
                updateAge(){
                    this.myAge++
                }
            }
            }
</script>

<style>
    /* 组件的样式 */
    .demo{
        color: red;
    }
</style>